<template>
  <div ref="video" id="video">
      <div class="b3" ref="videoChild" >
        <img src="../assets/banner3.png" />
        <div class="b3_d1">
            <h2>生态</h2>
        </div>
        <div class="b3_d2">
            <p style="text-align:left">
                建设生态文明城市有利于减少环境污染和生态破坏，缓解
                可持续发展的压力， <br/>从根本上转变经济发展方式，弥补自
                然资源的结构性缺陷，提高资源利用效率 和经<br/>济效益，实
                现经济社会全面、 协调和可持续发展。
            </p>
        </div>
        
    </div>
  </div>
</template>

<script>
export default {
  name: "Video",
  methods:{
      getHeigth(){
          this.$refs.video.style.height=window.getComputedStyle(this.$refs.videoChild).height
      }
  },
  mounted() {
      this.getHeigth()
  },
};
</script>

<style lang='scss' scoped>

.b3 {
  
  position:relative ;
  width: 100%;
  overflow: hidden;
  img {
    width: 100%;
    height: 570px;
    &:hover {
      transform: scale(1.05);
      box-shadow: 2px 6px 19px #818163;
      transition: all 0.7s;
      cursor: pointer;
    }
  }
  .b3_d1 {
    width: 50%;
    position: absolute;
    top: 30%;
    left: 10%;
    h2 {
      
      text-align: left;
      font-size: 60px;
      font-family: "Agency FB";
      color: white;
    }
  }
  .b3_d2 {
    
    width: 50%;
    position: absolute;
    left: 10%;
    top: 50%;
    p {
      text-indent: 4rem;
      color: white;
      font-family: 微软雅黑;
      font-size: 18px;
    }
  }
  
}
</style>